<template>
  <div class="pingmianlunbo" v-if="module.modules.length">
    <div class="IconAD">
      <div
        v-for="item in module.modules"
        :key="item.id"
        class="iconad-item flex-y"
      >
        <img
          class="image"
          :src="fileBaseUrl + item.pic"
          width="36.5px"
        >
        <div class="title app-space-ell-1">{{ item.title }}</div>
      </div>
    </div>
  </div>
  <ModuleNotConfig :module="module" v-else />
</template>

<script>
export default {
  props: {
    module: {
      type: Object,
    },
    fileBaseUrl: {
      type: String,
    },
  },
};
</script>

<style lang="scss" scoped>
.IconAD {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 2.5px;
  width: 100%;
  line-height: normal;
  
  .crosswise-line {
    height: 7px;
    margin-top: 14px;
    width: 100%;
    padding: 0 9.5px;
    box-sizing: border-box;
  }
  .line {
    background-color: #f6f6f6;
    width: 100%;
    height: 7px;
  }
  .iconad-item {
    width: 25%;
    text-align: center;
    margin-bottom: 13.5px;

    .image {
      width: 36.5px;
      height: 36.5px;
      border-radius: 20px;
      margin: 0 auto;
    }

    .title {
      font-size: 12px;
      line-height: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      width: 50px;
      color: rgba(0, 0, 0, 1);
      margin: 0 auto;
      margin-top: 5px;
    }
  }
}

</style>